<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			li {
				width: 100px;
				height: 30px;
				background: red;
				margin: 5px;
				float: left;
			}
			
			.a {
				/* 清除浮动 */
				clear: both;
			}

/* :: 伪元素 
 	after 在元素的末尾添加1个元素
 * */
.nav1::after {
	/* 内容 */
	content: "";
	
	/* 转换为块状元素 */
	display: block;
	
	/* 清除之前的浮动 */
	clear: both;
	
	/* 高度*/
	height: 0;
	
	/*不可见 */
	visibility: hidden;
}
			
		</style>
		
	</head>
	<body>
		

<ul class="nav1">
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>



<ul class="nav2">
	<li>2-1</li>
	<li>2-2</li>
	<li>2-3</li>
</ul>

		
		
	</body>
</html>
